<template>
  <div class="box">
    <div class="boxcontent">
      <div>
        <div>支持格式：mp4、mov、flv、wmv、rmvb</div>
        <div>最大上传大小：50M</div>
      </div>
      <div class="uplod"><Button type="primary" size="large" @click="savevideo" :loading="saveLoading" v-hasC="{ name: 'v1-base-file-update-file-temp2', flag: 'v1/base/file/update-file-temp'}">开始上传</Button></div>
    </div>
    <Divider dashed />
    <div class="vediobox">
      <div class="vedioUp">
        <Upload
          :max-size="51200"
          :format="['mp4','flv','mov','wmv','rmvb']"
          type="drag"
          :action="requestAction"
          :show-upload-list="false"
          :on-format-error="(res) =>vedioFormatError(res)"
          :before-upload="(res) => handleBeforevedios( res)"
          :on-progress="(res) => handlevedioProgress(res)"
          :on-success="(res) =>vedioexcellUploadSuccess(res)"
          :on-error="(res) => handlevedioError(res)"
          :on-exceeded-size="handleMaxSize"
          >
          <Progress v-if="showProgress" :percent="percentage" status="active"></Progress>
          <div style="padding: 53px 20px">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p>点击选择要上传的视频，最大支持50M</p>
          </div>
        </Upload>
      </div>
      <div v-if="vedioUrl">
              <video :src="vedioUrl" controls  width="300" height="180"></video>
      </div>
    </div>
    <div>

    </div>
  </div>
</template>
<script>
    import { updatefileTemp } from '@/api/set'
    import Setting from '@/setting';
    import util from '@/libs/util';
    export default {
        data () {
            return {
                baseUrl:  Setting.request.apiBaseURL,
                url: '',
                vedioUrl: '', // 拼接过http的视频地址
                vedio: '', // 要保存的视频
                percentage: 0,
                showProgress: false,
                cannotSave: false,
                uploading: false,
                files: null,
                requestAction: '',
                saveLoading: false,
                data: {},
                videoId:'',//上传视频的id
            }
        },
        mounted () {
            this.requestAction = this.baseUrl + `/v1/upload/video?auth_access_token=${ util.cookies.get('token')}&auth_project_id=${localStorage.getItem('currentProject')}`;
        },
        methods: {
            initial () {
                this.vedioUrl = ''
            },
            // 视频上传成功
            vedioexcellUploadSuccess (res) {
                this.vedio = res.data.video_url;
                this.vedioUrl = `${res.data.host}${this.vedio}`
                this.uploadContents = res.data;
                this.videoId=res.data.video_id
                // this.vedioUrl = res.data;
                this.showProgress = false;
                this.cannotSave = false;
                this.uploading = false;
                this.percentage = 0;
                this.$Notice.destroy();
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超过文件大小限制',
                    desc: '视频太大不能超过50M'
                });
            },
            // 视频上传回调之前
            handleBeforevedios (res) {
                this.files = res
                if((this.files.type !== 'video/mp4') && (this.files.type !== 'video/flv') && (this.files.type !== 'video/mov')&& (this.files.type !== 'video/wmv')
                    && (this.files.type !== 'video/rmvb')
                ) {
                    this.$Message.error({
                        content: '请上传正确的视频格式',
                        duration: 5,
                        closable: true
                    });
                    return false;
                }
                // if (res.size > 52428800) {
                //     this.$Message.error('视频大于50M,请压缩后上传')
                // } else {
                //     this.files = res
                // }
                // console.log(res, '上传回调之前')
                this.vedioUrl = '';
                this.showProgress = true;
                this.cannotSave = true;
                this.uploading = true;
            },
            // 上传失败
            handlevedioError (res) {
                this.showProgress = false;
                this.cannotSave = false;
                this.uploading = false;
                this.percentage = 0;
                this.$Message.error('上传视频失败');
                this.$Notice.destroy();
            },
            // 进度
            handlevedioProgress (event) {
                this.percentage = Math.round(event.loaded * 100 / event.total);
                if (this.percentage == 100) {
                    this.$Notice.warning({
                        title: '上传视频完成',
                        duration: 0,
                        desc: '正在处理视频并获取视频第一帧图片，请在图片回显后再保存'
                    });
                }
            },
            // 上传保存
            savevideo () {
                if (this.vedioUrl) {
                    this.saveLoading = true;
                    updatefileTemp({ id: this.videoId }).then(res => {
                        this.$Message.success('上传成功');
                        this.saveLoading = false;
                        this.vedioUrl = ''
                    }).catch(() => {
                        this.saveLoading = false;
                    })
                }
            }
        }
    }
</script>
<style scoped>
.box{
  padding: 0 20px;
  position: relative;
}
.boxcontent{
  display: flex;
  justify-content: space-between;
  padding: 10px 40px;
  }
.vediobox{
  padding:  0 20px;
  display: flex;
  justify-content:space-between;
}
.vedioTitle{
  line-height: 30px;
}
.vedioUp{
  margin-left: 20px;
}
/deep/.ivu-upload{
  width: 100%;
  height: 180px;
}
/* .uplod  /deep/.ivu-btn-primary{
  position: absolute;
  top: 10px;
  right: 20px;
} */
</style>
